.box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  display: flex;
  align-items: end;
  justify-content: end;
}

.herder {
  display: flex;
  width: 100%;
}

@media (min-width: 320px) and (max-width: 480px) {
  .herder {
    height: 100px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .herder {
    height: 120px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .herder {
    height: 140px;
  }
}

@media (min-width: 1025px) and (max-width: 1200px) {
  .herder {
    height: 160px;
  }
}

@media (min-width: 1201px) {
  .herder {
    height: 180px;
  }
}

@media (min-width: 320px) and (max-width: 480px) {
  h1, p {
    color: #f00;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  h1, p {
    color: #00f;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  h1, p {
    color: #ff0;
  }
}

@media (min-width: 1025px) and (max-width: 1200px) {
  h1, p {
    color: #f0f;
  }
}

@media (min-width: 1201px) {
  h1, p {
    color: #0f0;
  }
}
